<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/vue.js"></script>
</head>
<body>

    <!--1.一个容器-->
    <div id="app">
        <!--3.使用vue中数据
        插值表达式
        -->
        <h1>1.简单插值表达式</h1>
        {{username}} --  {{password}}
        <h1>2.数组使用插值表达式</h1>
        {{ ['mike','tom','gray','jerry'][2] }}

        <h1>3.json对象使用插值表达式</h1>
        {{ {name:"老王",age:"18"}.name }}
        <!--<input type="text" v-model="username" id="username">-->
        <h1>4.使用插值表达式调用函数 注意:如果是methods中的函数  调用时要加小括号  </h1>
         {{showMessage()}}
        <h1>5.使用插值表达式访问计算属性  注意:computed中的函数  调用时要加小括号</h1>
        {{showMessage1 }}
    </div>

    <!--{{username}}-->

    <script>

       // var username = $("#username").val();
        //2.创建vue的实例
       // 页面展示：helloworld!!
        var app = new Vue({
            el:"#app",//vue实现的挂载点  dom的id
            //vue中的数据定义
            //1） 用户录入  2） 服务端返回的  3）静态数据
            data:{
                username:"zhangsan",
                password:"zhangsan"
            },
            methods:{
                showMessage(){
                    return "helloworld!!";
                }
            },
            computed:{
                showMessage1(){
                    return "helloworld!! computed";
                }
            }

        });


    </script>

</body>
</html>